<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('角色查询页面')"/>
</head>
<body>
<div class="layuimini-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="roleSelect-table" lay-filter="roleSelect-table"></table>
        <script type="text/html" id="roleSelect-toolbar">
            <form id="formId" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="角色"
                               class="layui-input" />
                    </div>
                    <button class="layui-btn layui-btn-md" lay-submit lay-filter="roleSelect-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-md layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </form>
        </script>
    </div>
</div>
</div>

<th:block th:include="include :: footer"/>
<script>
    var roleId = '[[${roleId}]]';
    var roleName = '[[${roleName}]]';
    let table;
    layui.use(['table', 'form', 'jquery'], function () {
        table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;

        let prefix = pName + "/system/common/";

        let cols = [
            [
                {type: 'checkbox'},
                {
                    field: 'id',
                    title: '主键',
                    hide: true
                },
                {
                    field: 'name',
                    title: '角色',
                }
            ]
        ]

        table.render({
            elem: '#roleSelect-table',
            url: pName + '/system/role/data',
            page: true,
            escape: true,
            cols: cols,
            skin: 'line',
            toolbar: '#roleSelect-toolbar',
            defaultToolbar: []
        });
        table.on('row(roleSelect-table)', function (obj) {
            console.log(obj.data)
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

            parent.$("#"+roleId).val(obj.data.id);	//修改元素属性
            parent.$("#"+roleName).val(obj.data.name);				//表单回填
            parent.layer.close(index);						//关闭弹窗

        })
        form.on('submit(roleSelect-query)', function (data) {
            table.reload('roleSelect-table', {where: data.field})
            return false;
        });
    })
</script>
</body>
</html>